<template>
	<view class="user-contacts l-whitespace">
		<view class="user-contacts-mod">
			<view class="ucm-l van-hairline--right">
				<view class="sum color2">
					{{reward}}
					<text>LAB</text>
				</view>
				<view>已获得奖励</view>
			</view>
			<view class="ucm-r">
				<view class="sum color2">
					{{inviteNum}}
					<text>人</text>
				</view>
				<view>邀请人数</view>
			</view>
		</view>

		<view class="contacts-wrap l-whitespace">
			<block v-for="(item, index) in contactsInfo.item" :key="index">
				<view class="wpl-item van-hairline--bottom">
					<view class="wpl-item-name">
						<view slot="icon" class="avatar">
							<image class="img" src="../../static/touxiang.png"></image>
						</view>
						<view slot="title" class="name">
							<view class="vName">
								{{ item.tel }}
								<text
									class="btm"
									:style="{ backgroundColor: vType[item.vtype].color }"
								>
									{{ vType[item.vtype].name }}
								</text>
							</view>
							<view class="vId">会员号：{{ item.id }}</view>
							<view class="vTime">{{ item.time }}</view>
						</view>
					</view>
					<!-- <view slot="right-icon" class="wpl-item-sum">
						<view class="iconfont icondianhua" @click="onCall(item.phone)"></view>
					</view> -->
				</view>
			</block>
		</view>
		<loadding-more :noData="false" :loadEnd="loadEnd"></loadding-more>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import LoaddingMore from '../../components/loadding-more.vue';
export default {
	components: {
		LoaddingMore
	},
	data() {
		return {
			loadEnd: true,
			vType: [
				{
					name: '普通会员',
					color: '#aace36'
				},
				{
					name: '黄金会员',
					color: '#B8860B'
				},
				{
					name: '铂金会员',
					color: '#00ecfa'
				},
				{
					name: '砖石会员',
					color: '#9dabd5'
				}
			],
			contactsInfo: '',
			reward: 0,
			inviteNum: 0
		};
	},
	onShow () {
		uni.showLoading({
			title: ''
		})
		this.getInviteReward()
		this.getAllConnections()
	},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo'
		})
	},
	methods: {
		getInviteReward () {
			this.$http.getInviteReward({uid: this.userInfo.id}).then(e => {
				if (e.data) {
					this.reward = Number(e.data.reward).toFixed(2)
					this.inviteNum = e.data.num
				}
			})
		},
		getAllConnections () {
			this.$http.getAllConnections({uid: this.userInfo.id}).then(e => {
				if (e.data.msg === 'ok') {
					uni.hideLoading()
					this.contactsInfo = e.data.data
					if (!e.data.data.totalNum) {
						this.loadEnd = true
						return
					}
				}
			})
		}
	}
};
</script>

<style scoped lang="scss">
image {
	width: 100%;
	height: 100%;
}
.user-contacts {
	&-mod {
		display: flex;
		padding: 20upx;
		margin-top: 20upx;
		background-color: #fff;
		border-radius: 10upx;
		box-shadow: 0 5upx 15upx 0 rgba(0, 0, 0, 0.1);
		.ucm {
			&-l,
			&-r {
				width: 50%;
				font-size: 26upx;
				color: #9b9b9b;
				text-align: center;
				.sum {
					font-size: 40upx;
					text {
						margin-left: 10upx;
						font-size: 24upx;
						color: #9b9b9b;
					}
				}
			}
		}
	}
}
.contacts {
	&-wrap {
		margin: 20upx 0;
		background-color: #fff;
		&-tetile {
		}
		.wpl-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20upx 0;
			&-name {
				display: flex;
				align-items: center;
				.name {
					.vName {
						font-size: 28upx;
						line-height: 1;
						display: flex;
						align-items: center;
						.btm {
							max-width: 90upx;
							max-height: 28upx;
							padding: 0 5upx;
							margin-left: 10upx;
							line-height: 1.4;
							font-size: 18upx;
							text-align: center;
							border-radius: 10%;
							color: #fff;
						}
					}
					.vId {
						font-size: 22upx;
						line-height: 1.8;
					}
					.vTime {
						font-size: 20upx;
						color: #9b9b9b;
					}
				}
				.avatar {
					width: 90upx;
					height: 90upx;
					margin-right: 15upx;
					border-radius: 100%;
					overflow: hidden;
				}
			}
			.icondianhua {
				width: 60upx;
				height: 60upx;
				line-height: 60upx;
				text-align: right;
				font-size: 36upx;
			}
		}
	}
}
</style>
